﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body onload="PageLoad()">
<form id="f1">
<div>
    <div id="divDrag" style="width:150px;height:150px;border:1px solid #ff6600;background-color:#00ff21;" draggable="true"></div>
    <div id="divTips"></div>

    <div id="divArea" style="width: 500px; height: 300px; border: 1px solid #ff6600;"></div>

</div>
<script type="text/javascript">
    function PageLoad(){
        var Drag = document.getElementById('divDrag');
        var Area = document.getElementById('divArea');

        Drag.ondragstart = function (e) {
            Status_Handle("元素正在开始拖动...");
            //存入拖放数据(调用dataTransfer的setData事件)
            var objDF = e.dataTransfer; 
            var strHtml = document.getElementById(this.id).outerHTML;   //获取要被拖放元素的HTML标签,也就是复制了一个相同的对象
            objDF.effectAllowed = "copy";   //设置拖放效果
            //format: text/plain:文本文字;text/html:HTML页面代码;text/xml;text/url-list:URL格式列表
            objDF.setData("text/html", strHtml);                        //传递给拖放区域
        }
        Area.ondrop = function (e) {
            Status_Handle('元素拖入成功');
            //获取拖放数据
            var objDf = e.dataTransfer;
            objDf.dropEffect = "copy";  //必须是effectAllowed中存在的效果
            var strHtml = objDf.getData("text/html");
            Area.innerHTML += strHtml;
            e.preventDefault();
            e.stopPropagation();    //停止其他事件的进程
        }
        Area.ondragleave = function (e) {
            Status_Handle('拖动元素正在离开...');
        }
    }
    //显示执行过程中的状态
    function Status_Handle(message) {
        document.getElementById("divTips").innerHTML += message + "<br />";
    }
    //添加页面的dragover事件(拖放元素的过程中首先拖放的是页面，所以要允许页面被拖放，不然页面中的元素也不能拖放)
    document.ondragover = function (e) {
        e.preventDefault(); //阻止默认方法，取消拒绝被拖放
    }
    //添加页面的drop事件
    document.ondrop = function (e) {
        e.preventDefault();
    }

</script>
</form>

</body>
</html>
